<template>
	<view>
		<view class="settle">
			<view class="settle__up-icon" @click="checkUpIcon()">
				<u-icon name="order" size="32"></u-icon>
				<u-badge :isDot="(formData.order.length > 0)" type="error"></u-badge>
			</view>
			<view class="settle__left" @click="checkUpIcon()">
				<view class="settle__left__text">共 {{totalData.totalNumber}} 注</view>
				
			</view>
			<view class="settle__multiple" >
				<view class="settle__left__money"><text>￥</text> {{totalData.totalMoney||0}} <text>.{{totalData.totalMoneySuffix || '00'}}</text></view>
			</view>
			<view class="settle__but">
				<u-button class="settle__but__but" :loading="loading" type="primary" @click="onAddOrder" text="下注"></u-button>
				<u-button class="settle__but__but" :loading="loading"  type="primary" @click="addOrder" text="结算"></u-button>
			</view>
		</view>
		<u-popup :show="show" :customStyle="{bottom:'156rpx'}" zIndex="10072"  @close="function(){show=false;}" :overlay="true" bgColor="#FFFFFF">
			<view class="settle-popup">
				<view class="settle-popup__head">
					<text>预选订单</text>
					<u-icon @click="checkUpIcon()" class="settle-popup__head__close" name="close"></u-icon>
				</view>
				<view class="settle-popup__button">
					<view class="settle-popup__button__item">
						<u-button type="primary" text="设置金额" size="small" @click="setMoney"></u-button>
					</view>
					<view class="settle-popup__button__item">
						<u-button type="primary" text="设置倍数" size="small" @click="setMultiple"></u-button>
					</view>
				</view>
				<view class="settle-popup__order">
					<scroll-view scroll-y="true" class="order-scroll">
						<view class="settle-popup__order__item" v-for="(item,inx) in formData.order" :key="inx">
							<view class="settle-popup__order__title">{{item.pid_name}}<text>-</text>{{item.title}} <text v-if="item.remark" style="margin-left:10rpx;font-size: 28rpx;">（{{item.remark}})</text></view>
							<view class="settle-popup__order__number">
								<view v-for="(vl,vk) in item.betting_code" :key="vk" :class="'settle-popup__order__number__text ' + ' ball-'+vl.color " >{{vl.nub}}</view>
							</view>
							<view class="settle-popup__order__amount">
								<view class="settle-popup__order__fiex">
									<text class="settle-popup__order__fiex__text">倍数：</text>
									<u--input placeholder="倍数" border="surround" v-model="item.multiple" @change="changeMoney(item)"></u--input>
								</view>
								<view class="settle-popup__order__fiex">
									<text class="settle-popup__order__fiex__text">金额：</text>
									<u--input placeholder="金额" border="surround" v-model="item.money" clearable @change="changeMoney(item)"></u--input>
								</view>
							</view>
							<view class="settle-popup__order__momey">
								<view class="settle-popup__order__momey__amount">共<text class="settle-popup__order__momey__number">{{item.amount}}</text>注，金额：￥<text class="settle-popup__order__momey__number">{{item.total_money}}</text></view>
								<view class="settle-popup__order__momey__button">
									<u-button type="error" text="删除" size="mini" @click="del(inx)"></u-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-modal :title="'统一设置' + (isMoneyShow ? '金额' : '倍数')" :show="isShowModal" closeOnClickOverlay showCancelButton buttonReverse
			@confirm="onsubmitMoney()" @cancel="() => isShowModal = false">
			<view>
				<u-number-box v-if="isMoneyShow" v-model="initMoney"></u-number-box>
				<u-number-box v-else v-model="initMultiple"></u-number-box>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {submitOrder} from '@/api/lottery.js'
	export default {
		name:'settle',
		props:{
			orderList:{
				type:Array,
				default: () => {
				    return [];
				}
			},
			id:{
				type:Number,
				default: () => {
				    return 0;
				}
			},
			issue:{
				type:[String,Number],
				default: () => {
				    return '';
				}
			}
		},
		data() {
			return {
				value:1,
				show:false,
				formData:{
					order:[]
				},
				totalData:{
					totalNumber:0,
					totalMoney:0,
					totalMoneySuffix:''
				},
				isShowModal:false,
				initMoney:0,
				initMultiple:1,
				isMoneyShow:true,
				loading:false
			}
		},
		watch:{
			orderList(val){
				this.formData.order = val;
				this.reckonToTalMoney();
			},
			issue(val){
				this.formData.issue = val;
			},
			id(val){
				this.formData.id = val;
			}
		},
		mounted() {
			this.formData.issue = this.issue;
			this.formData.id = this.id;
		},
		methods: {
			checkUpIcon(){
				this.show = !this.show
			},
			onAddOrder(){
				this.$emit('onAddOrder',true);
			},
			del(inx){
				this.formData.order.splice(inx,1)
			},
			setMultiple(){
				this.isMoneyShow = false;
				this.isShowModal = true;
			},
			setMoney(){
				this.isMoneyShow = true;
				this.isShowModal = true;
			},
			onsubmitMoney(){
				this.isShowModal = false;
				if(this.isMoneyShow) {
					if(this.initMoney < 1) {
						uni.$u.toast('金额不能小于1');
						return false;
					}
					this.reckonToTalMoney(this.initMoney,0);
				}else{
					if(this.initMultiple < 1) {
						uni.$u.toast('倍数不能小于1');
						return false;
					}
					this.reckonToTalMoney(0,this.initMultiple);
				}
			},
			changeMoney(item){
				if(!item.money && !item.multiple) {
					return false;
				}
				
				this.reckonToTalMoney();
			},
			reckonToTalMoney(m=0,u=0){
				this.totalData = {
					totalNumber:0,
					totalMoneySuffix:'',
					totalMoney:''
				};
				let totalMoney = 0;
				this.formData.order.forEach(item=>{
					if(m > 0) {
						item.money = m;
					}
					if(u > 0) {
						item.multiple = u;
					}
					if(item.money > 0 && item.multiple > 0) {
						item.total_money = (parseInt(item.amount) * parseInt(item.multiple) * parseFloat(item.money)).toFixed(2)
						this.totalData.totalNumber += parseInt(item.amount);
						totalMoney += (parseInt(item.amount) * parseInt(item.multiple) * parseFloat(item.money));
					}
					
				});
				let totalMoneyArr = totalMoney.toFixed(2).split('.');
			
				this.totalData.totalMoneySuffix = totalMoneyArr[1];
				this.totalData.totalMoney = totalMoneyArr[0];
				
			},
			addOrder(){
				if(this.loading) {
					return false;
				}
				if(!this.formData.order || this.formData.order.length === 0) {
					uni.$u.toast('没有可提交的数据');
					return false;
				}
				this.formData.order.map(item=>{
					if(item.money < 1) {
						uni.$u.toast('金额不能小于1');
						return false;
					}
					if(item.multiple < 1){
						uni.$u.toast('倍数不能小于1');
					}
				});
				// this.loading = true;
				submitOrder(this.formData).then(res=>{
					this.loading = false;
					if(res.code === 200) {
						uni.$u.toast(res.message);
						this.formData.order = [];
						this.totalData = {
							totalNumber:0,
							totalMoneySuffix:'',
							totalMoney:''
						};
						this.show = false;
						this.$emit('onsumlit',[]);
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">

.settle{
	width: 96%;
	height: 116rpx;
	position: fixed;
	left:0;
	right: 0;
	bottom: 0;
	padding: 20rpx 2%;
	background-color: #FFFFFF;
	border-top: 2rpx solid rgb(244, 243, 242);
	z-index: 10073;
	&__left{
		width: 20%;
		float: left;
		&__text{
			width: 100%;
			font-size: 28rpx;
			text-align: left;
			line-height: 116rpx;
		}
		&__money{
			color: rgb(228, 57, 60);
			font-size: 36rpx;
			font-weight: bold;
			line-height: 116rpx;
			text{
				font-size: 28rpx;
			}
		}
	}
	&__multiple{
		width: 30%;
		float: left;
		&__text{
			width: 30%;
			float: left;
			line-height: 116rpx;
		}
	}
	&__multiple .u-input{
		border:1rpx solid rgb(192, 196, 204);
		margin-top: 24rpx;
	}
	&__but{
		width: 40%;
		float: right;
		&__but{
			margin-top: 24rpx;
			margin-left: 2%;
			float:left;
			width:46%;
		}
	}
	&__up-icon{
		width:10%;
		float:left;
	}
	&__up-icon .u-icon{
		margin-top:30rpx;
	}
	&__up-icon .u-badge{
		position: absolute;
		top: 30%;
		left: 8%;
	}
}

.settle-popup{
	&__head{
		width: 100%;
		height: 70rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 70rpx;
		border-bottom: 2rpx solid rgb(244, 243, 242);
		&__close{
			float:right;
			margin:20rpx 20rpx 0 0;
		}
		&__title{
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	&__button {
		width: 96%;
		height: 60rpx;
		padding: 20rpx 2%;
		&__item{
			width: 120rpx;
			float: left;
			margin-right: 20rpx;
		}
	}
	&__order{
		width: 96%;
		padding: 3rpx 2%;
		border-top: 1px dashed rgb(224, 223, 222);
		&__item{
			width: 100%;
			overflow: auto;
			padding: 20rpx 0 40rpx 0;
			border-bottom: 1px dashed rgb(224, 223, 222);
		}
		&__title{
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
		}
		&__number{
			width: 100%;
			overflow: auto;
			font-size: 28rpx;
			padding:20rpx 0;
			&__text{
				width: 38rpx;
				height: 38rpx;
				line-height: 40rpx;
				border-radius: 100%;
				float: left;
				text-align: center;
				margin-right:10rpx;
				margin-bottom:10rpx;
				padding: 10rpx;
			}
		}
		&__amount{
			width: 100%;
			
		}
		&__fiex{
			width: 46%;
			float: left;
			margin: 20rpx 4% 20rpx 0;
			font-size: 24rpx;
			&__text{
				width: 30%;
				float: left;
				line-height: 74rpx;
			}
		}
		&__fiex .u-input{
			border:1rpx solid rgb(192, 196, 204);
		}
	
		&__momey{
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			&__amount{
				width: 70%;
				float: left;
			}
			&__number{
				font-size: 32rpx;
				color: #e4393c;
				margin: 0 6rpx;
				font-weight: bold;
				
			}
			&__button{
				width: 120rpx;
				float: right;
				margin-right: 20rpx;
			}
		}
	}
}
.order-scroll{
	max-height: 900rpx;
}
.ball-red{
	background-color: #dd524d;
	color:#FFFFFF;
}
.ball-blue{
	background-color: #007aff;
	color:#FFFFFF;
}
.ball-green{
	background-color: #4cd964;
	color:#FFFFFF;
}
</style>
